import React from 'react'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Calendar, Cell } from 'react-vant'
function index() {
  const nav = useNavigate()
  const onFinish = (val) => {
    console.log(val)
    nav('/list',{state:val})
  }
  return (
    <div>
      <Form
        onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            查询
          </Button>
        }
      >
        <Form.Item
          name='start'
          label='开始城市'
        >
          <Input placeholder='请输入开始城市' />
        </Form.Item>
        <Form.Item
          name='end'
          label='结束城市'
        >
          <Input placeholder='请输入结束城市' />
        </Form.Item>
        <Form.Item>
          <Calendar>
            {(val, actions) => (
              <Cell
                isLink
                title='单个日期'
                value={val ? val.toLocaleDateString() : '请选择日期'}
                onClick={() => actions.open()}
              />
            )}
          </Calendar>
        </Form.Item>
      </Form>
    </div>
  )
}

export default index